<template>
	<view class="info">
		<!-- 芯房详情 -->
		<view class="top-bar">
			<view :class="active==0 ? 'active top-bar-item':'top-bar-item' " @click="changeTab()">
				<text>地产信息</text>
			</view>
			<view :class="active==1 ? 'active top-bar-item':'top-bar-item' " @click="changeTab()">
				<text>项目信息</text>
			</view>
		</view>
		<swiper :current="active" class="swiper">
			<swiper-item class="house-info">
				<advanced-lable content="公司介绍"></advanced-lable>
				<image src="/static/other_icons/house-1.png" class="img"></image>
				<text>当建筑不断进化，建筑师亦需不断增强与建筑材料、建结构的了解与沟通，并将自己缜空、精益求精的思想灌于建筑本身。当这一系列复杂而又充满着智慧举措完成，建筑师往往需要一个能充分领悟自己建筑思想、感悟构企图，同时具有高超的视觉表现能力的合作伙。</text>
				<advanced-lable content="楼盘信息"></advanced-lable>
				<image src="/static/other_icons/house-index.png" class="img"></image>
				<text>当建筑不断进化，建筑师亦需不断增强与建筑材料、建结构的了解与沟通，并将自己缜空、精益求精的思想灌于建筑本身。当这一系列复杂而又充满着智慧举措完成，建筑师往往需要一个能充分领悟自己建筑思想、感悟构企图，同时具有高超的视觉表现能力的合作伙。</text>
				<advanced-lable content="公司动态"></advanced-lable>
				<image src="/static/other_icons/house-1.png" class="img"></image>
				<text>当建筑不断进化，建筑师亦需不断增强与建筑材料、建结构的了解与沟通，并将自己缜空、精益求精的思想灌于建筑本身。当这一系列复杂而又充满着智慧举措完成，建筑师往往需要一个能充分领悟自己建筑思想、感悟构企图，同时具有高超的视觉表现能力的合作伙。</text>
			</swiper-item>
			<swiper-item class="project-info">
				<image src="/static/other_icons/house-index.png" class="img"></image>
				<text>当建筑不断进化，建筑师亦需不断增强与建筑材料、建结构的了解与沟通，并将自己缜空、精益求精的思想灌于建筑本身。当这一系列复杂而又充满着智慧举措完成，建筑师往往需要一个能充分领悟自己建筑思想、感悟构企图，同时具有高超的视觉表现能力的合作伙。</text>
				<image src="/static/other_icons/house-1.png" class="img"></image>
				<text>当建筑不断进化，建筑师亦需不断增强与建筑材料、建结构的了解与沟通，并将自己缜空、精益求精的思想灌于建筑本身。当这一系列复杂而又充满着智慧举措完成，建筑师往往需要一个能充分领悟自己建筑思想、感悟构企图，同时具有高超的视觉表现能力的合作伙。</text>

			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0
			};
		},
		methods: {
			changeTab() {
				if (this.active) {
					this.active = 0
				} else {
					this.active = 1
				}
			}
		}
	}
</script>

<style lang="scss">
	.info {
		display: flex;
		flex-direction: column;

		.top-bar {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			background: #FFFFFF;

			.top-bar-item {
				text-align: center;
				display: inline-block;
				color: #999999;

			}

			.active {
				border-bottom: 5rpx solid #E62129;
				color: #333333;
			}
		}

		.swiper {

			height: 2516rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			.house-info {
				margin-top: 35rpx;
				display: flex;
				flex-direction: column;
				.img {
					margin: 20rpx 0 20rpx 0;
				}

				.text {
					margin: 10rpx 0;
					color: #333333;
					font-size: 28rpx;
				}
			}
		}

	}
</style>
